 <!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="description" content="这是对这个网页的一个描述，网站的描述会显示在搜索引擎的搜索结果中">
     <meta name="refresh" content="3;url=http://www.baidu.com">
     <title>HTML笔记</title>
     <!-- title标签中的内容会作为搜索结果的超链接上的文字显示 -->
 </head>
 <body>
    <!-- header  网页的头部或者是网页部分块的头部
         main    网页的内容，只有一个
         footer  网页的底部或者是网页部分块的底部
         nav     网页中的导航
         aside   和主题相关的其它内容（表现为侧边栏）
         article 表示一个独立的文章
         section 表示独立的一个区块，上边的标签不能表示时使用section

         div     没有语义，就用来表示一个区块，目前div是主要的布局元素，可以代替上面的所有
         span    行内元素，没有任何语义，一般用于在网页中选中文字

    -->
    <header></header>
    <main></main>
    <footer></footer>
    <nav></nav>
    <aside></aside>
    <article></article>
    <section></section>
    <div></div>
    <span></span>

     <!-- 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 
        在 HTML中不能直接书写一些特殊符号 ，则需要使用一些HTML中的实体（转义字符）
        实体的语法：
            &实体的名字;例如：
                 &nbsp;空格 
                 &gt;大于号
                 &lt;小于号
                 &copy;版本符号
                 全部实体在W3Cschool.com的实体手册

    -->
    <p><h1>sdsda </h1></p> 
<!-- em标签用来表示语音语调的一个加重 行内元素

    在页面中不会独占一行的元素成为行内元素（inline element）
-->
    <p>今天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天气<em>真</em>不错</p>

    <p>a&gt;b&lt;c</p>
    <!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入hgroup -->
    <hgroup>
        <h1>回乡偶书二首</h1>
        <h2>其一</h2>
    </hgroup>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- strong表示强调，重要内容  行内元素 -->
    <p>
        今天你必须<strong>完成作业</strong>
    </p>

    <p>鲁迅说：</p>
    <!-- blockquote表示一个长引用 是全元素 -->
    <blockquote>
        这句话我是从来没有说过
    </blockquote>
    <p>子曰<q>有朋自远方来，不亦说乎</q></p>
   <!-- br标签是换行标签 -->
    <br>  
    今天天气不错

    <!-- 
        列表（list）    
        三种列表：
        有序列表，无序列表（用的比较多），定义列表

        有序列表；使用ol标签来创建有序列表
        使用li表示列表项

        无序列表；使用ul标签来创建无序列表
        使用li表示列表项       

        定义列表：使用dl标签来创建定义列表
                 使用dt标签来表示定义的内容
                 使用dd标签来对内容进行解释说明

        列表之间可以相互嵌套
     -->
     <ol>
         <li>有序列表第一列</li>
         <li>有序列表第二列</li>
         <li>有序列表第三列</li>
     </ol>

     <ul>
        <li>无序列表第一列</li>
        <li>无序列表第二列</li>
        <li>无序列表第三列</li>
     </ul>

     <dl>
         <dt>使用dt标签来表示定义的内容</dt>
         <dd>使用dd标签来对内容进行解释说明</dd>
     </dl>

     <ol>
         <li>嵌套</li>
         <ul>
             <li>有序列表里面嵌套一个无序列表的第一列</li>
             <li>有序列表里面嵌套一个无序列表的第二列</li>
             <li>有序列表里面嵌套一个无序列表的第三列</li>
             <dl>
                 <dt>在嵌套的无序列表中再嵌套一个定义列表</dt>
                 <dd>在嵌套的无序列表中再嵌套一个定义列表中的dd标签的内容</dd>
             </dl>
         </ul>
     </ol>

     <!-- 
         超链接：从一个网页到另一个网页，或者是到当前页面的其他位置
        
         使用a标签来定义超链接
            属性：
              href属性：指定跳转的目标路径
                    -值可以是一个外部网站的地址
                    -也可以写一个内部网页的地址
                当我们需要跳转到一个服务器内部的网页时,用./或../的相对路径来表示超链接的地址  
              target属性：用来指定超链接打开的位置
                    可选值：
                        _self 默认值 在当前页面打开超链接
                        _blank 在一个新的标签中打开超链接    

         a标签是行内元素，在a标签中可以嵌套除它以外的任何元素
     -->
     <a href="https://www.baidu.com" target="_blank">百度超链接</a>
     <br>
     <br>
     <a href="./index2.html">一个文件夹下的地址</a>
     <br>
     <br>
     <a href="../path/target.html">另一个文件夹下的地址</a>
     <br>
     <br>
     <a href="../path/target.html" target="_blank">在一个新的标签中打开另一个文件夹下的地址</a>

     <!-- 
         href的值是#时，点击超链接不会跳转新网页，而是回到当前网页的顶部

         可以跳转到页面的指定位置，只需要将href属性设置 #目标元素的id属性值

         id属性（唯一不重复）
                -每一个标签都可以添加一个id属性
                -id属性是元素的唯一标识，同一个页面中不能出现重复的id属性，且id值一般是字母开头
      
     -->
      <br>
      <br>
     <a href="#p3">跳转到第三自然段</a>

     <!-- 
         在开发中，可以使用#作为超链接的路径的占位符使用
         可以使用JavaScript:; 作为 href 的属性 点击这个超链接什么也不会发生
      -->
      <br><br>
      <a href="#">在开发中，可以使用#作为超链接的路径的占位符使用</a>
      <br><br>
      <a href="javascript:;">可以使用JavaScript:; 作为 href 的属性 点击这个超链接什么也不会发生</a>

     <p>今昔为2014年的六月初旬，我依然记得在2008年的夏天我进入了社会这个复杂的环境体系之中，经过了富士康的三年多的沉淀，而后在一无所获之后毅然的离开了这个熟悉的地方，我满怀无限热情，开始了我两年近乎于流浪的生活，东南西北，漫无目的，我抱着年轻的资本以体验青春感悟生活的方式行走在一条被世人所不能接受的道路上，而后落魄不堪，颠沛流离之后，走到了现在，收敛了不少锋芒，锐气也在现实的不断打磨中负了当年，更有可能在旁人看来，我已然没了当年的雄心壮志，变得趋向于平静，不可否认两年多的生活让我的确看清和认识了很多以往看不真切的东西，脸上多少爬上了一些不何年龄的沧桑！对于“梦想”这两个字眼也确实是有了一些新的认识，就目前的生活而言，平淡，平静，索然无味。为此我不谈任何抱怨，因为我心中依然匍匐着一只猛虎，豪情万丈，狂放洒脱的话语，我以不在人前多言，但如此就认为我心如止水那么也是一个错位的判断！自我懂事以来我一向自命不凡，自视极高，哪怕我面对的是今天这样的局面我依旧不觉得我看错了自己。</p>
     <p>今昔为2014年的六月初旬，我依然记得在2008年的夏天我进入了社会这个复杂的环境体系之中，经过了富士康的三年多的沉淀，而后在一无所获之后毅然的离开了这个熟悉的地方，我满怀无限热情，开始了我两年近乎于流浪的生活，东南西北，漫无目的，我抱着年轻的资本以体验青春感悟生活的方式行走在一条被世人所不能接受的道路上，而后落魄不堪，颠沛流离之后，走到了现在，收敛了不少锋芒，锐气也在现实的不断打磨中负了当年，更有可能在旁人看来，我已然没了当年的雄心壮志，变得趋向于平静，不可否认两年多的生活让我的确看清和认识了很多以往看不真切的东西，脸上多少爬上了一些不何年龄的沧桑！对于“梦想”这两个字眼也确实是有了一些新的认识，就目前的生活而言，平淡，平静，索然无味。为此我不谈任何抱怨，因为我心中依然匍匐着一只猛虎，豪情万丈，狂放洒脱的话语，我以不在人前多言，但如此就认为我心如止水那么也是一个错位的判断！自我懂事以来我一向自命不凡，自视极高，哪怕我面对的是今天这样的局面我依旧不觉得我看错了自己。</p>
     <p id="p3">今昔为2014年的六月初旬，我依然记得在2008年的夏天我进入了社会这个复杂的环境体系之中，经过了富士康的三年多的沉淀，而后在一无所获之后毅然的离开了这个熟悉的地方，我满怀无限热情，开始了我两年近乎于流浪的生活，东南西北，漫无目的，我抱着年轻的资本以体验青春感悟生活的方式行走在一条被世人所不能接受的道路上，而后落魄不堪，颠沛流离之后，走到了现在，收敛了不少锋芒，锐气也在现实的不断打磨中负了当年，更有可能在旁人看来，我已然没了当年的雄心壮志，变得趋向于平静，不可否认两年多的生活让我的确看清和认识了很多以往看不真切的东西，脸上多少爬上了一些不何年龄的沧桑！对于“梦想”这两个字眼也确实是有了一些新的认识，就目前的生活而言，平淡，平静，索然无味。为此我不谈任何抱怨，因为我心中依然匍匐着一只猛虎，豪情万丈，狂放洒脱的话语，我以不在人前多言，但如此就认为我心如止水那么也是一个错位的判断！自我懂事以来我一向自命不凡，自视极高，哪怕我面对的是今天这样的局面我依旧不觉得我看错了自己。</p>
     <p>今昔为2014年的六月初旬，我依然记得在2008年的夏天我进入了社会这个复杂的环境体系之中，经过了富士康的三年多的沉淀，而后在一无所获之后毅然的离开了这个熟悉的地方，我满怀无限热情，开始了我两年近乎于流浪的生活，东南西北，漫无目的，我抱着年轻的资本以体验青春感悟生活的方式行走在一条被世人所不能接受的道路上，而后落魄不堪，颠沛流离之后，走到了现在，收敛了不少锋芒，锐气也在现实的不断打磨中负了当年，更有可能在旁人看来，我已然没了当年的雄心壮志，变得趋向于平静，不可否认两年多的生活让我的确看清和认识了很多以往看不真切的东西，脸上多少爬上了一些不何年龄的沧桑！对于“梦想”这两个字眼也确实是有了一些新的认识，就目前的生活而言，平淡，平静，索然无味。为此我不谈任何抱怨，因为我心中依然匍匐着一只猛虎，豪情万丈，狂放洒脱的话语，我以不在人前多言，但如此就认为我心如止水那么也是一个错位的判断！自我懂事以来我一向自命不凡，自视极高，哪怕我面对的是今天这样的局面我依旧不觉得我看错了自己。</p>
     <p>今昔为2014年的六月初旬，我依然记得在2008年的夏天我进入了社会这个复杂的环境体系之中，经过了富士康的三年多的沉淀，而后在一无所获之后毅然的离开了这个熟悉的地方，我满怀无限热情，开始了我两年近乎于流浪的生活，东南西北，漫无目的，我抱着年轻的资本以体验青春感悟生活的方式行走在一条被世人所不能接受的道路上，而后落魄不堪，颠沛流离之后，走到了现在，收敛了不少锋芒，锐气也在现实的不断打磨中负了当年，更有可能在旁人看来，我已然没了当年的雄心壮志，变得趋向于平静，不可否认两年多的生活让我的确看清和认识了很多以往看不真切的东西，脸上多少爬上了一些不何年龄的沧桑！对于“梦想”这两个字眼也确实是有了一些新的认识，就目前的生活而言，平淡，平静，索然无味。为此我不谈任何抱怨，因为我心中依然匍匐着一只猛虎，豪情万丈，狂放洒脱的话语，我以不在人前多言，但如此就认为我心如止水那么也是一个错位的判断！自我懂事以来我一向自命不凡，自视极高，哪怕我面对的是今天这样的局面我依旧不觉得我看错了自己。</p>
     <p>今昔为2014年的六月初旬，我依然记得在2008年的夏天我进入了社会这个复杂的环境体系之中，经过了富士康的三年多的沉淀，而后在一无所获之后毅然的离开了这个熟悉的地方，我满怀无限热情，开始了我两年近乎于流浪的生活，东南西北，漫无目的，我抱着年轻的资本以体验青春感悟生活的方式行走在一条被世人所不能接受的道路上，而后落魄不堪，颠沛流离之后，走到了现在，收敛了不少锋芒，锐气也在现实的不断打磨中负了当年，更有可能在旁人看来，我已然没了当年的雄心壮志，变得趋向于平静，不可否认两年多的生活让我的确看清和认识了很多以往看不真切的东西，脸上多少爬上了一些不何年龄的沧桑！对于“梦想”这两个字眼也确实是有了一些新的认识，就目前的生活而言，平淡，平静，索然无味。为此我不谈任何抱怨，因为我心中依然匍匐着一只猛虎，豪情万丈，狂放洒脱的话语，我以不在人前多言，但如此就认为我心如止水那么也是一个错位的判断！自我懂事以来我一向自命不凡，自视极高，哪怕我面对的是今天这样的局面我依旧不觉得我看错了自己。</p>

     <a href="#">回到顶部</a>

      <!-- 
          图片标签用于向当前页面中引入一个外部图片
          使用img标签（自结束标签）
          属性：
            src 属性指定是外部图片的路径(路径规则和超链接一样)

            alt 图片的描述，默认情况下不会显示，有些浏览器在图片无法加载时显示
            搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，则不会被搜索引擎所检索

            width 图片的宽度（单位是像素）
            heigth 图片的高度
                -如果只修改宽度和高度中的一个，则另一个会等比例缩放

            注意：
                一般在PC短，不建议修改图片的大小，需要多大的图片就裁多少
                但是在移动端，经常需要对图片进行缩放

            图片的格式：
                jpeg（jpg）
                    -支持的颜色比较丰富，不支持透明效果，不支持动图
                    -一般用来显示照片
                gif
                    -支持的颜色比较少，支持简单透明，支持动图
                    -适合颜色单一的图片、动图
                png
                    -支持的颜色丰富，支持复杂透明，不支持动图
                    -适合颜色灯幅，复杂透明的图片（专为网页而生）
                webp
                    -它具备其它图片格式的所有优点，而且文件还特别小
                    -缺点：兼容性不好 
                
                base64
                    -将图片使用base64进行编码，这样可以将图片转换成字符，通过字符的形式引入图片
                    -一般都是一些需要和网页一起加载的图片才会使用base64，不会出现时间差

                效果一样，用小的
                效果不一样，用效果好的
                在效果和大小中取一个平衡


       -->
       <br>
       <br>
       <img src="../img/001.jpg" alt="公司文件" width="500">
       <br>
       <br>
       <img width="500" src="https://pic32.photophoto.cn/20140703/0005018389467072_b.jpg" alt="超人">
       
       <!-- 
           iframe 内联框架，用于页面中引入一个其它页面
              -src 指定要引入的网页的路径
              -frameborder  指定内联框架是否有边框
        -->
        <br>
        <br>
        <iframe src="https://www.qq.com/" frameborder="0"></iframe>

        <!-- 
            audio/video 标签用来向网页中引入一个外部的音视频文件
            音视频文件引入时，默认情况下不允许用户自己控制播放停止

            属性：
                -controls 是否允许用户控制播放
                -autoplay 音视频文件是否自动播放
                        -如果设置了autoplay 则音乐在打开页面时会自动播放
                            但是目前来讲大部分浏览器都不会自动播放音视频
                -loop  是否循环播放音视频文件 
         -->
         <br>
         <audio src="" controls autoplay loop></audio>
         <br>
         <audio controls>
             对不起，该浏览器不支持播放改音频文件
             <source src=""> 
         </audio>
         <video src="./f1662c3d50a884c8acbcfc3b368825c3.mp4" controls ></video>
 </body>
 </html>

 <h1>我就要写在html外部</h1>